page{
    // 防止底层工具栏遮挡内容 
    // 高 与 底层工具栏高 相等
    padding-bottom: 90rpx;
}

.detail_pic{
    height: 60vw;
    text-align: center;
    image{
         width: 60%;
    }
}

.goods_price{
    padding: 15rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: var(--themeColor);
}

.goods_name_row{
    border-top: 5rpx solid #dedede;
    border-bottom: 5rpx solid #dedede;
    padding: 10rpx 0;
    display: flex;
    .goods_name{
        flex: 5;
        color: #000;
        // 字体大小
        font-size: 30rpx;
        // 上下0 左右10rpx
        padding: 0 10rpx;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .goods_share{
        flex: 1;
        display: flex;
        // 主轴方向 调整为上下
        flex-direction: column;
        // 垂直居中
        justify-content: center;
        // 水平居中
        align-items: center;
        // 左 边框线
        border-left: 1rpx solid #000;

        font-size: 24rpx;
        
        .iconfont{}
        .share_text{}
        // 相对定位
        position: relative;
        button{
            // 绝对定位
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // 透明度为0
            opacity: 0;
        }
    }
}

.goods_info{
    .goods_info_title{
        font-size: 32rpx;
        color: var(--themeColor);
        font-weight: 600;
        padding: 20rpx;
    }
    .goods_info_content{
        padding: 20rpx;
        font-weight: 28rpx;
    }
}

.btm_tool{
    // 增加上边框
    border-top: 1px solid #ccc;

    // 固定定位 固定到页面底
    position: fixed;
    left: 0;
    bottom: 0;
    // 使用固定定位后必须设置宽 否则宽为 内容撑开
    width: 100%;
    height: 90rpx;

    background-color: #fff;
    display: flex;
    .tool_item{
        flex: 1;

        // 会让图标和文字在一行显示
        display: flex;
        // 改变主轴方向 为上下
        flex-direction: column;

        justify-content: center;
        align-items: center;

        font-size: 24rpx;
        
        // 相对定位
        position: relative;
        button{
            // 绝对定位
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // 透明度为0
            opacity: 0;
        }
    }
    .btn_cart{
        flex: 2;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background-color: #ffa500;
        color: #fff;
        font-size: 30rpx;
        font-weight: 600;
    }
    .btn_buy{
        flex: 3;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background-color: #eb4450;
        color: #fff;
        font-size: 30rpx;
        font-weight: 600;
    }
}